<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Visit &middot; California</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content=""> -->

    <!-- CSS styles -->
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../css/popupuser.css" rel="stylesheet">
    <link href="../css/user.css" rel="stylesheet">
    <link href="../css/visitcali.css" rel="stylesheet">
    <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
  
  </head>

    <body>
	

      <div class="container">
       <div class="masthead">
        <h1 class="muted">VisitCali.com</h1>
        <img src="../img/widescreenBanner1.jpg" alt="smiley face"/> 
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
              <ul class="nav">
                <li><a href="../index.html">Home</a></li>
                <li><a href="places.html">Places to visit</a></li>
                <li><a href="dos-donts.html">Do's and don'ts</a></li>
                <li><a href="faq.html">FAQ</a></li>
                <li><a href="about.html">About us</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="jumbotron">
        <h1>User information</h1>
      </div>

      <div class="row-fluid">
        <div class="span2">
          <img src="<?php echo $UrlUserPicture; ?>" alt="user picture">
      </div>
      <div class="span3">
        <p class="lead">
			<?= $UserInfo ?>
          <a href="" data-width="500" data-rel="popup1" class="poplight btn btn-primary btn-medium">Modify</a>
        </p>
      </div>
      <div class="span7">
        <button type="button" onclick="signOut();" data-toggle="button" class="btn btn-primary btn-medium btn-warning rightAnchor"><i class="icon-off icon-white pictureInButton"></i>  Sign out</button>
      </div>
    </div>

    <div class="topPadding50">
      <p class="titleDiv">Posted articles :</p>
      <table title="table articles" class="table topPadding20">
        <caption></caption>
        <thead>
          <tr>
            <th>Locations</th>
            <th>Date</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><a>Location 1</a></td>
            <td>1st January</td>
            <td>
              <a onClick="deleteArticle();"><img height="16" width="16" src="../img/delete.png" alt="delete icon"/></a>
              <a class="leftPadding10" onClick="modifyArticle();"><img height="16" width="16" src="../img/modify_icon.png" alt="modify icon"/></a>
            </td>
          </tr>
          <tr>
            <td><a>Location 2</a></td>
            <td>1st January</td>
            <td>
              <a onClick="deleteArticle();"><img height="16" width="16" src="../img/delete.png" alt="delete icon"></a>
              <a class="leftPadding10" onClick="modifyArticle();"><img height="16" width="16" src="../img/modify_icon.png" alt="modify icon"/></a>
            </td>
          </tr>

          <tr>
            <td><a>Location 3</a></td>
            <td>1st January</td>
            <td>
              <a onClick="deleteArticle();"><img height="16" width="16" src="../img/delete.png" alt="delete icon"></a>
              <a class="leftPadding10" onClick="modifyArticle();"><img height="16" width="16" src="../img/modify_icon.png" alt="modify icon"/></a>
            </td>
          </tr>

          <tr>
            <td><a>Location 4</a></td>
            <td>1st January</td>
            <td>
              <a onClick="deleteArticle();"><img height="16" width="16" src="../img/delete.png" alt="delete icon"></a>
              <a class="leftPadding10" onClick="modifyArticle();"><img height="16" width="16" src="../img/modify_icon.png" alt="modify icon"/></a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <button type="button" onclick="addNewArticle();" class="btn btn-primary btn-large" data-toggle="button">Add a place to visit &raquo;</button>

      <div class="container expendableDiv" id="idDivExpendable">
        <form>
          <fieldset>
            <legend>New place</legend>
            <label for="placelocation">Place location</label>
            <input id="placelocation" type="text" placeholder="Type something…">
            <label for="articlebody">Article</label>
            <textarea id="articlebody" rows="3" placeholder="Type something…"></textarea>
            <span class="help-block">Remember that the article you are writing mustn't contain some insults or shocking pictures. Please be respectful.</span>
          </fieldset>
        <!-- </form> -->

        <div class="browse">
          <!-- <form> -->
            <label id="labelUpload"for="imageUploadField">Upload</label>
            <input id="imageUploadField" type="file" class="input_text"/>
          
          <button class="btn btn-success"><i class="icon-plus-sign icon-white pictureInButton"></i> Upload</button>
        </div>

      </form>
        <div class="topPadding20">
          <img src="http://fakeimg.pl/190x160/" alt="previewupload1">
          <img src="http://fakeimg.pl/190x160/" alt="previewupload2">
          <img src="http://fakeimg.pl/190x160/" alt="previewupload2">
        </div>
        <button type="submit" class="btn btn-success btn-large topPadding20">Submit</button>
      </div>
      <hr>
      <div class="topPadding50">
        <p class="titleDiv">Posted comments :</p>
        <table title="Comments list" class="table topPadding20">
          <thead>
            <tr>
              <th>Comment</th>
              <th>Locations</th>
              <th>Date</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><a >Coment blaablaa ...</a></td>
              <td><a >Location 1</a></td>
              <td>1st January</td>
              <td>
                <a onClick="deleteComment();"><img height="16" width="16" src="../img/delete.png" alt="delete icon"></a>
                <a class="leftPadding10" onClick="modifyComment();"><img height="16" width="16" src="../img/modify_icon.png" alt="modify icon"></a>
              </td>
            </tr>
            <tr>
              <td><a>Coment blaablaa ...</a></td>
              <td><a>Location 2</a></td>
              <td>1st January</td>
              <td>
                <a onClick="deleteComment();"><img height="16" width="16" src="../img/delete.png" alt="delete icon"></a>
                <a class="leftPadding10" onClick="modifyComment();"><img height="16" width="16" src="../img/modify_icon.png" alt="modify icon"></a>
              </td>
            </tr>
            <tr>
              <td><a>Coment blaablaa ...</a></td>
              <td><a>Location 3</a></td>
              <td>1st January</td>
              <td>
                <a onClick="deleteComment();"><img height="16" width="16" src="../img/delete.png" alt="modify icon"></a>
                <a class="leftPadding10" onClick="modifyComment();"><img height="16" width="16" src="../img/modify_icon.png" alt="modify icon"></a>
              </td>
            </tr>
            <tr>
              <td><a>Coment blaablaa ...</a></td>
              <td><a>Location 4</a></td>
              <td>1st January</td>
              <td>
                <a onClick="deleteComment();"><img height="16" width="16" src="../img/delete.png" alt="delete icon"></a>
                <a class="leftPadding10" onClick="modifyComment();"><img height="16" width="16" src="../img/modify_icon.png" alt="modify icon"></a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <hr>

      <div class="footer">
        <p>&copy; CSUSM 2013 [CIS 444]</p>
      </div>
    </div>

    <!-- ====================JAVASCRIPT============================ -->
    <!-- Placed at the end of the document so the pages load faster -->
	<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
    <script type="text/javascript" src="../bootstrap/js/jquery.js"></script>
   
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootbox.js"></script>
    <script src="../bootstrap/js/bootstrap-transition.js"></script>
    <script src="../bootstrap/js/bootstrap-alert.js"></script>
    <script src="../bootstrap/js/bootstrap-modal.js"></script>
    <script src="../bootstrap/js/bootstrap-dropdown.js"></script>
    <script src="../bootstrap/js/bootstrap-scrollspy.js"></script>
    <script src="../bootstrap/js/bootstrap-tab.js"></script>
    <script src="../bootstrap/js/bootstrap-tooltip.js"></script>
    <script src="../bootstrap/js/bootstrap-popover.js"></script>
    <script src="../bootstrap/js/bootstrap-button.js"></script>
    <script src="../bootstrap/js/bootstrap-collapse.js"></script>
    <script src="../bootstrap/js/bootstrap-carousel.js"></script>
    <script src="../bootstrap/js/bootstrap-typeahead.js"></script>
    

    <!-- POP UP User Modification/Inscription -->
    <div id="popup1" class="popup_block">

      <div>
        <h2 class="centerInDiv">Inscription/Modification</h2>
      </div>
      <!-- <div class="container-fluid"> -->
        <div class="form-horizontal">
        <form>
<!--           <legend>Person Form</legend>
 -->          <div class="row-fluid">

            <!-- ERROR DIV FORM -->
            <div class="row-fluid invisible">
              <div class="span12 bgcolor">
                <div class="alert alert-error">
                  <a href="" class="close" data-dismiss="alert">×</a>
                  Error Messages.
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span6 bgcolor">
                <label for="firstName">First Name</label>
                <input type="text" id="firstName" placeholder="Peter">
              </div>
              <div class="span6 bgcolor" >
                <label for="lastname">Last Name</label>
                <input type="text" id="lastname" placeholder="Jones">
              </div>
            </div>

            <div class="row-fluid topPadding10">
              <div class="span6 bgcolor" >
                <label for="email">E-mail</label>
                <input type="text" id="email" placeholder="Type something">
              </div>

              <div class="span6 bgcolor" >
                <label for="dateofbirth">Date of birth</label>
                <input type="text" id="dateofbirth" placeholder="mm/dd/YYYY">
              </div>
            </div>

            <div class="row-fluid topPadding10">

              <div class="span6 bgcolor">
                <label for="password">Password</label>
                <input type="text" id="password" placeholder="Type something">
              </div>

              <div class="span6 bgcolor" >
              <label for="confirmpassword">Confirmation password</label>
              <input type="text" id="confirmpassword" placeholder="Type something">
            </div>
          </div>
        </div>

        <fieldset class="topPadding10">
          <legend>Photo</legend>
          <div class="row-fluid">
            <div class="span6 bgcolor">
             <div>
              <img src="http://fakeimg.pl/160x160/" alt="previewuser" class="leftAnchor">
            </div>
          </div>
          <div class="span6 bgcolor">
            <div class="browse centerVertically">
              <label id="labelUploadUser" for="imageUserPreview">Upload</label>
              <input type="file" name="image" id="imageUserPreview" class="input_text"/>
              <button class="btn btn-success"><i class="icon-plus-sign icon-white"></i> Upload</button>
            </div>
          </div>

        </div>
        <div class="row-fluid bgcolor topPadding20">
        <button type="submit" class="btn btn-success btn-large centerButtonPopup">Submit</button>
        </div>
      </fieldset>      
      </form>                  
    </div>
<!--     <div class="span4">
    </div> -->
    <!-- </div> -->
  </div>
</body>
</html>
